<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="演员头像" prop="headImgurl">
              <oss-image-upload
                v-model="form.headImgurl"
                :limit="1"
              ></oss-image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="演员名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入演员名称"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="演员简介" prop="introduction">
              <Editor
                v-model="form.introduction"
                placeholder="请输入演员简介"
                type="url"
              ></Editor>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="演员官方网站" prop="officialWebsite">
              <el-input v-model="form.officialWebsite" placeholder="请输入演员官方网站"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getactor, addactor, updateactor } from "@/api/actor/actorMage";
export default {
  name: "AddActor",
  dicts: [],
  components: {},
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入演员名称", trigger: "blur" }],
        introduction: [{ required: true, message: "请输入演员简介", trigger: "blur" }],
        headImgurl: [{ required: true, message: "请上传演员头像", trigger: "blur" }],
      },
      form: {
        
      },
     
    };
  },
  watch: {
    // 监听路由对象本身
    '$route'(to, from) {
      // 检查参数的变化
      console.log('9999')
      if (to.query.id!== from.query.id) {
        // 参数发生变化时的处理逻辑
        if(to.query.id){
          this.getInfo(to.query.id);
        }else{
          this.form={}
        }
       
      }
    }
  },
  created() {
   
  },
  mounted(){
    const { id } = this.$route.query;
    if (id) {
      this.getInfo(id);
    }
  },
  methods: {
    getInfo(id) {
      getactor(id).then((response) => {
        let  data=response
        if(data.headImgurl){
          if(data.headImgurl.indexOf(',')>-1){
            data.headImgurl=data.headImgurl.split(',')[0]
          }
        }
        console.log(data)
        this.form =data;
      
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateactor(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addactor(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
          this.cancel();
        } else {
          // if (this.form.name) {
          //   this.$alert("请填写规格价格", "提示", {
          //     confirmButtonText: "确定",
          //   });
          // } else {
          //   this.$alert("请填写商品名称", "提示", {
          //     confirmButtonText: "确定",
          //   });
          // }
        }
      });
    },
    cancel() {
      this.$tab.closeOpenPage({ path: "/actorManagement/actorMange" });
    },
  },
};
</script>

<style lang="stylus">
.add-product-wrapper {
  padding: 12px;

  .content {
    margin: 0 auto;
    width: 75%;
    min-width: 800px;
  }

  .sku-wrapper {
    background-color: #f7f8fa;
    padding: 12px;

    .sku_sorts {
      .sku_sort {
        background-color: white;
        margin-bottom: 12px;

        .label {
          padding: 8px;
        }

        .values {
          padding: 8px 0 0 8px;
          border-top: 1px solid $border-color;
          display: flex;
          flex-wrap: wrap;

          .value {
            padding: 0 32px 8px 0;
            width: 200px !important;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .img-upload-mini .el-upload--picture-card {
    width: 48px;
    height: 48px;
    line-height: 57px;
  }
}
</style>
